<template>
  <div class="app-container">
    <common-edit-dialog
      :visible="dialogShow"
      :title="dialogTitle"
      :button-loading="loading"
      @cancel="close"
      @submit="submit"
    >
      <el-form
        ref="form"
        autocomplete="off"
        :model="user"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="原密码" prop="oldPassword">
          <common-pwd-input
            v-model="user.oldPassword"
            placeholder="请输入原密码"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-col :span="24">
            <common-pwd-input
              v-model="user.newPassword"
              placeholder="请输入新密码"
              :showPwd="false"
            />
          </el-col>
          <el-col :span="24">
            <!-- <div style="color:#999">密码规则长度范围[8-20]</div> -->
            <div style="color: #999; font-size: 12px; line-height: 18px">
              <span v-if="row.minLength && row.maxLength">
                长度范围{{
                  row.minLength || row.maxLength
                    ? `[${row.minLength}-${row.maxLength}]`
                    : "不限制"
                }} </span
              ><br />
              <span v-if="row.firstIsUpper || row.firstIsUpper == 0">
                首字母大写{{
                  row.firstIsUpper || row.firstIsUpper == 0
                    ? firstIsUpper[row.firstIsUpper]
                    : "无"
                }} </span
              ><br />
              <span v-if="row.hasLower || row.hasLower == 0">
                小写字母{{
                  row.hasLower || row.hasLower == 0
                    ? showTextRule[row.hasLower]
                    : "无"
                }} </span
              ><br />
              <span v-if="row.hasNumber || row.hasNumber == 0">
                数字{{
                  row.hasNumber || row.hasNumber == 0
                    ? showTextRule[row.hasNumber]
                    : "无"
                }} </span
              ><br />
              <span v-if="row.hasSpecial || row.hasSpecial == 0">
                特殊字符{{
                  row.hasSpecial || row.hasSpecial == 0
                    ? `${showTextRule[row.hasSpecial] + row.characters}`
                    : "无"
                }} </span
              ><br />
              <span v-if="row.hasUpper || row.hasUpper == 0">
                大写字母{{
                  row.hasUpper || row.hasUpper == 0
                    ? showTextRule[row.hasUpper]
                    : "无"
                }}
              </span>
            </div>
          </el-col>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <common-pwd-input
            v-model="user.confirmPassword"
            placeholder="请确认密码"
            :showPwd="false"
          />
        </el-form-item>
      </el-form>
    </common-edit-dialog>
  </div>
</template>

<script>
import { updateUserPwd, getDeFaultPwdRule } from "@/api/person/index";
import { decode, encode } from "@/utils/aesUtils";
import { MessageBox } from "element-ui";
import store from "@/store";
export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      dialogTitle: "修改密码", // 标题
      dialogShow: false, // 是否显示
      showTextRule: ["必须包含", "不允许包含", "不限制"],
      firstIsUpper: ["必须包含", "无", "不限制"],
      row: {},
      test: "1test",
      user: {
        oldPassword: "",
        olddPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      // 表单校验
      rules: {
        oldPassword: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur",
          },
        ],
        newPassword: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          // {
          // 	min: 6,
          // 	max: 20,
          // 	message: '长度在 6 到 20 个字符',
          // 	trigger: 'blur',
          // },
        ],
        confirmPassword: [
          {
            required: true,
            message: "请确认密码",
            trigger: "blur",
          },
          {
            required: true,
            validator: equalToPassword,
            trigger: "blur",
          },
        ],
      },
      loading: false,
      type: "text",
    };
  },
  methods: {
    /**
     * 关闭
     */
    close() {
      this.$refs.form.resetFields();
      this.dialogShow = false;
    },
    /**
     * 显示
     */
    show(data) {
      this.getDeFaultPwdRule();
      this.dialogShow = true;
      //查询当前密码
      this.user.oldPassword = "";
      this.user.newPassword = "";
      this.user.confirmPassword = "";
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          updateUserPwd({
            newPwd: encode(this.user.newPassword),
            oldPwd: encode(this.user.oldPassword),
          })
            .then((res) => {
              if (res && res.code === 200) {
                this.$GlobalSuccessMessage("修改成功");
                this.$refs.form.resetFields();
                this.dialogShow = false;
              } else {
                if (
                  res.code === 500 &&
                  res.data === "update_pwd_error_logout"
                ) {
                  this.$confirm(res.msg, "修改失败", {
                    confirmButtonText: "确定",
                    showCancelButton: false,
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    showClose: false,
                    type: "error",
                  }).then(() => {
                    this.$store
                      .dispatch("LogOut")
                      .then(() => {})
                      .finally(() => {
                        location.href = "/login";
                      });
                  });
                } else {
                  this.$GlobalErrorConfirm("修改失败", res.msg);
                }
              }
            })
            .finally(() => (this.loading = false));
        }
      });
    },
    getDeFaultPwdRule() {
      getDeFaultPwdRule().then((res) => {
        if (res && res.code === 200) {
          this.row = res.data;
        } else {
        }
      });
    },
    setType(val) {
      this.type = "password";
    },
  },
};
</script>
